<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Sprite</title>
    <style>
        /* 
            CSS Sprite
                - 将多个小图片合并到一个大图中，使用时在通过background-position显示到不同的图片
                    这个技术就称为CSS Sprite，这个大图我们称其为雪碧图
                - 特点：
                    1.将多个图片合并为一个雪碧图，减少了图片的加载次数，提升了用户的体验
                    2.多个图片合并到一起同时也方便我们在项目中对图片进行管理
                    3.图片合并后的大小要小于原来的大小，增加了加载的速度

                - 使用场景
                    - 网页中的那些小图标，小的按钮
                
                - 和图标字体的比较
                    1.图标字体的颜色是单一的，雪碧图颜色可以有多种颜色
                    2.图标字体颜色可以改变，雪碧图不行
                    3.图标字体是矢量图可以任意放大，雪碧图是位图放大后会失真

                - 制作雪碧图
                    http://alloyteam.github.io/gopng/
        */

    </style>
</head>
<body>
    
</body>
</html>